<template>
	<view class="goods-detail" :style="{paddingBottom:120+bottomLift+'rpx'}">
		<form :borderBottom="false">
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.commodityInternationalCode')}}</view>
				<!-- <picker :value="index" @change="bindPickerKeyword" :range="keywordList" range-key="keyword" v-if="keywordList.length>0">
          <view class="keyword">
            <input class="uni-input" placeholder="请输入商品国际编码" v-model="goodInfo.keyword" @input="querySearchAsync" />
            <text class='iconfont iconarrow-right1'></text>
          </view>
        </picker> -->
				<input class="uni-input" disabled :placeholder="$t('goods.pleaseEnterTheProductInternationalCode')"
					v-model="goodInfo.keyword" @input="querySearchAsync" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.productName')}}</view>
				<input class="uni-input" name="input" disabled v-model="goodInfo.storeName"
					:placeholder="$t('goods.pleaseEnterProductName')" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.unit')}}</view>
				<input class="uni-input" name="input" disabled v-model="goodInfo.unitName"
					:placeholder="$t('goods.pleaseEnterUnit')" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.brand')}}</view>
				<!-- <picker @change="bindPickerBrand" :value="index" :range="brandList" range-key="enName"> -->
				<input class="uni-input" name="input" disabled v-model="goodInfo.brandName"
					:placeholder="$t('goods.pleaseSelectBrand')" />
				<!-- </picker> -->
			</view>
			<!-- <view class="uni-form-item uni-column" @click="showPicker = true">
        <view class="title">分类</view>
        <input class="uni-input" name="input" disabled v-model="goodInfo.cateName" placeholder="请选择分类" />
      </view> -->
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.classification')}}</view>
				<input class="uni-input" name="input" disabled v-model="goodInfo.cateName"
					:placeholder="$t('goods.pleaseSelectType')" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.productMainImage')}}</view>
				<view class="imageBox">
					<u-upload :action="action" :header="headers" :deletable="false"
						@on-success="(res)=> uploadImg(res, 0)" @on-remove="(index)=>deletePic(index,0)"
						name="multipart" :max-count="1" :custom-btn="false" width="112" height="112"
						:show-progress="false" :file-list="fileListImg">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.productCarousel')}}</view>
				<view class="imageBox">
					<u-upload :action="action" :header="headers" name="multipart" :deletable="false"
						:max-count="fileListsliderImage.length" @on-success="(res)=> uploadImg(res, 1)"
						@on-remove="(index)=>deletePic(index,1)" :custom-btn="true" width="112" height="112"
						:show-progress="false" :file-list="fileListsliderImage">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.productDetails')}}</view>
				<view class="imageBox">
					<u-upload :action="action" ref='upload5' :header="headers" name="multipart" :deletable="false"
						:max-count="fileListproductDetails.length" @on-success="(res)=> uploadImg(res, 5)"
						@on-remove="(index)=>deletePic(index,1)" :custom-btn="true" width="112" height="112"
						:show-progress="false" :file-list="fileListproductDetails">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.productDescription')}}</view>
				<textarea class="text" :placeholder="$t('goods.productDescriptionPlaceholder')" disabled
					v-model="goodInfo.storeInfo" :rows="3" :cols="5" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">{{$t('goods.productDetails')}}</view>
				<view class="goodsInfo1">
					<view class="item-list">
						<view class="item" v-for="(item,index) in informationList" :key="index">
							<label class="title1">{{item.productInformation}}</label>
							<input type="text" disabled v-model="item.value" :placeholder="$t('publicLang.pleaseEnter')">
						</view>
						<view class="item" v-if="showField.seasonCode">
							<label class="title1">{{$t('goods.season')}}</label>
							<input type="text" v-model="goodInfo.seasonCode" disabled
								:placeholder="$t('publicLang.pleaseChoose')" :disable="true">
						</view>
						<view class="item" v-if="showField.composition">
							<label class="title1">{{$t('goods.element')}}</label>
							<input type="text" v-model="goodInfo.composition" :placeholder="$t('publicLang.pleaseEnter')">
						</view>
						<view class="item" v-if="showField.dimension">
							<label class="title1">{{$t('goods.specification')}}</label>
							<input type="text" v-model="goodInfo.dimension" :placeholder="$t('publicLang.pleaseEnter')">
						</view>
						<view class="item" v-if="showField.colorCode">
							<label class="title1">{{$t('goods.color')}}</label>
							<input type="text" v-model="goodInfo.colorCode" :placeholder="$t('publicLang.pleaseEnter')">
						</view>
						<view class="item" v-if="showField.productionPlace">
							<label class="title1">{{$t('goods.origin')}}</label>
							<input type="text" v-model="goodInfo.productionPlace" :placeholder="$t('goods.pleaseEnterTheCountryOfOrigin')">
						</view>
						<view class="item" v-if="showField.weight">
							<label class="title1">{{$t('goods.weight')}}</label>
							<input type="number" v-model="goodInfo.weight" :placeholder="$t('goods.pleaseEnterWeight')">(kg)
						</view>
					</view>
				</view>
			</view>
			<view v-for="(goodsItem,index1) in detailData.products" :key="index1">
				<view class="uni-form-item uni-column">
					<view class="title">{{$t('goods.placeOfShipment')}}</view>
					<!-- <input class="uni-input" name="input" @click="handleTap('stockAreaPicker')" disabled v-model="goodsItem.tempName" placeholder="请选择商品发货地" /> -->
					<view class="uni-input">
						{{$t(`publicLang.${goodsItem.tempName}`)}}
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">{{$t('goods.estimatedDeliveryTime')}}</view>
					<input class="uni-input" name="input" disabled v-model="goodsItem.deliveryTime"
						:placeholder="$t('goods.pleaseEnterDeliveryTime')" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">{{$t('goods.expectedArrivalTime')}}</view>
					<input class="uni-input" name="input" disabled v-model="goodsItem.receivingTime"
						:placeholder="$t('goods.pleaseEnterTheArrivalTime')" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">{{$t('goods.productRecommendationMap')}}</view>
					<view class="imageBox">
						<!-- <image class="image" v-if="goodInfo.recommendImg" :src="item.recommendImg"></image>
            <image class="image" src="../../static/images/add.png" v-else></image> -->
						<u-upload :action="action" :header="headers" name="multipart"
							@on-success="(res)=> uploadImg(res, 2,index1)"
							@on-remove="(index)=>deletePic(index,2,index1)" :max-count="1" :custom-btn="true"
							width="112" height="112" :show-progress="false" :file-list="goodsItem.imageurl">
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
							</view>
						</u-upload>
					</view>
				</view>
				<!-- <view class="uni-form-item uni-column">
		  <view class="title">商品小视频</view>
		  <view class="imageBox">
			<view class="imageBody" v-show="flag" style="position: relative;">
			<view style="width: 200rpx;height: 200rpx;position: absolute;" @click="openVideo">
			  	<image :src="dataObj.videoUrl.url+'?ci-process=snapshot&time=0'" mode="aspectFill"></image>
			</view>
			<view class="iconfont icon-quxiao delIcon" @click="delVideo"></view>
			<video id="myVideo" :src="dataObj.videoUrl.url" @fullscreenchange="fullscreenchange"
			  	v-show="false"></video>
			</view>	
		    <view class="imageBody" v-show="!flag" @click="selectVideo">
		    	<view class="iconfont iconxiangji5"></view>
		    	<view style="width: 100%;padding: 0 5rpx;" v-show="VideoFlag">
		    		<progress :percent="VideoUploadPercent" stroke-width="3" />
		    	</view>
		    </view>
		  </view>
		</view> -->
				<view class="uni-form-item uni-column">
					<view class="title">{{$t('goods.priceCalculationMethod')}}</view>
					<view class="clearPrice">
						<input type="text" class="uni-input" style="width:400rpx" v-model="goodsItem.calculation"
							disabled>
						<button class="btn" :class="{'err':goodsItem.calculation.indexOf('分类加价率')!=-1}"
							@click="resetPrice(goodsItem.id)"
							:disabled="goodsItem.calculation.indexOf('分类加价率')==-1?false:true">{{$t('goods.oneClickClear')}}</button>
					</view>
					<view class="alt">
						<span>{{$t('goods.note')}}：</span>
						<span>{{$t('goods.priceMethodTips')}}</span>
						<span>{{$t('goods.priceMethodTips1')}}</span>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<block>
						<view class="selectRuleList">
							<block v-for="(item,index) in goodsItem.attr" :key="index">
								<view class="selectRuleItem" v-for="(iitem,iindex) in item.attrValue" :key="iindex">
									{{iitem}}
								</view>
							</block>
						</view>
					</block>
					<block>
						<view class="goodsInfo" v-for="(item,iindex) in goodsItem.attrValue" :key="iindex">
							<view class="item-list">
								<view class="item">
									<label class="title1">{{$t('goods.specificationDrawing')}}</label>
									<view class="skuImage">
										<u-upload :action="action" :header="headers" :max-count="item.imageurl.length"
											:deletable="false" @on-success="(res)=> uploadImg(res, 4,index1)"
											@on-remove="(index)=>deletePic(index,4,index1)" name="multipart"
											:custom-btn="true" width="112" height="112" :show-progress="false"
											:file-list="item.imageurl">
											<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
												hover-stay-time="150">
												<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
											</view>
										</u-upload>
									</view>
								</view>
							</view>
							<view class="item-list">
								<view class="item">
									<label class="title1">{{$t('goods.specification')}}</label>
									<view style="flex: 1;">{{item.suk}}</view>
								</view>
								<view class="item" style="border-left:1rpx solid #E8E9ED">
									<label class="title1">sourceSkuId</label>
									<input type="number" v-model="item.sourceSkuId" disabled
										:placeholder="$t('publicLang.pleaseEnter')">
								</view>
							</view>
							<view class="item-list">
								<view class="item">
									<label class="title1">{{$t('goods.sellingPrice')}}(￥)</label>
									<input type="number" v-model="item.price"
										:placeholder="$t('publicLang.pleaseEnter')">
								</view>
								<view class="item" style="border-left:1rpx solid #E8E9ED">
									<label class="title1">{{$t('goods.costPrice')}}(￥)</label>
									<input type="number" v-model="item.cost" disabled class="inputColor"
										:placeholder="$t('publicLang.pleaseEnter')">
								</view>
							</view>
							<view class="item-list">
								<view class="item">
									<label class="title1">{{$t('goods.originalPrice')}}(€)</label>
									<input type="number" v-model="item.otPrice" disabled class="inputColor"
										:placeholder="$t('publicLang.pleaseEnter')">
								</view>
								<view class="item" style="border-left:1rpx solid #E8E9ED">
									<label class="title1">{{$t('goods.inStock')}}</label>
									<input type="number" :min="0" v-model="item.stock" class="inputColor" disabled
										:placeholder="$t('publicLang.pleaseEnter')">
								</view>
							</view>
							<view class="item-list" v-if="appletType==1">
								<view class="item">
									<label class="title1">{{$t('goods.finalPrice')}}(￥)</label>
									<input type="number" :min="0" :value="dealPrice(item.price, item.taxAndSecondPrice)"
										class="inputColor" disabled :placeholder="$t('publicLang.pleaseEnter')">
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</form>
		<view class="address_mask back_mask" @click="showPicker = false" v-if="showPicker">
			<view class="picker_address_box pos_absolute1" @click.stop>
				<view class="picker_btn flex3">
					<view class="btn_cancle" @click="showPicker = false">{{$t('goods.cancel')}}</view>
					<view class="btn_confirm" @click="confirmTap">{{$t('goods.sure')}}</view>
				</view>
				<view class="picker_box">
					<view class="hk_mac">
						<picker-view v-if="productList.length > 0" class="picker_view" @change="bindChange2"
							:value="value2">
							<picker-view-column class="area_type">
								<view class="item flex1" v-for="(item,index) in productList" :key="index">{{item.name}}
								</view>
							</picker-view-column>
							<picker-view-column class="area_city">
								<view class="item flex1" v-for="(item,index) in productList[index1]['child']"
									:key="index">{{item.name}}</view>
							</picker-view-column>
							<picker-view-column class="area_city">
								<view class="item flex1"
									v-for="(item,index) in productList[index1]['child'][index2]['child']" :key="index">
									{{item.name}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" :class="bottomLift!=0?'bottomLift':''" :style="{paddingBottom: `${bottomLift}rpx`}">
			<view class="btn" @click="handleSubmit">{{$t('goods.submit')}}</view>
		</view>
		<lb-picker ref="stockAreaPicker" v-model="goodInfo.tempId" mode="selector"
			:dataset="{ name: 'stockAreaPicker' }" :list="stockArea" @confirm="handleConfirm">
		</lb-picker>
		<lb-picker ref="selectRulePicker" v-model="goodInfo.selectRule" mode="selector"
			:dataset="{ name: 'selectRulePicker' }" :list="ruleList" @confirm="handleConfirm">
		</lb-picker>
	</view>
</template>
<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL,
		TOKENNAME
	} from "@/config/app";
	import {
		insideProductDetailApi,
		productResetPrice,
		productNormKeywordApi,
		brandList,
		seasonListMer,
		stockAreaList,
		templateListApi,
		productCreateApi,
		productUpdateApi,
		goodsDetailApi,
		productCloudUpdateApi,
		getRuleByCate
	} from "@/api/storeGoods.js";
	import {
		categoryApi
	} from "@/api/store.js";
	const defaultObj = {
		image: "",
		productionPlace: '',
		detailImages: [],
		sp1: "",
		weight: '',
		recommendImg: "",
		sliderImages: [],
		sliderImage: "",
		storeName: "",
		storeInfo: "",
		keyword: "",
		brandId: "",
		brandName: "",
		cateIds: "", // 商品分类id
		cateId: null, // 商品分类id传值
		unitName: "",
		sort: 0,
		giveIntegral: 0,
		ficti: 0,
		isShow: false,
		isBenefit: false,
		isNew: false,
		isGood: false,
		isHot: false,
		isBest: false,
		tempId: "",
		attrValue: [{
			image: "",
			price: 0,
			cost: 0,
			otPrice: 0,
			stock: 0,
			// barCode: '',
			// weight: 0,
			// volume: 0
		}, ],
		attr: [],
		selectRule: "",
		isSub: false,
		content: " ",
		specType: 0,
		id: 0,
		couponIds: [],
		coupons: [],
		composition: "",
		dimension: "",
		deliveryData: "",
		slowestArrivalData: "",
		earliestArrivalData: "",
	};
	export default {
		computed: mapGetters(["token", "appletType"]),
		data() {
			return {
				id: "",
				goodInfo: Object.assign({}, defaultObj),
				//   ManyAttrValue: [], // 存储商品多规格数据列表
				manyTabTit: [],
				OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
				ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
				detailData: [],
				productList: [],
				keywordList: [],
				brandList: [],
				seasonList: [],
				showPicker: false,
				index1: 0,
				index2: 0,
				value2: [0, 0, 0],
				stockArea: [], //发货地列表
				ruleList: [], //规格列表
				action: "",
				headers: "",
				fileListImg: [],
				fileListsliderImage: [],
				fileListrecommendImg: [],
				fileListproductDetails: [],
				editState: false,
				bottomLift: app.globalData.bottomLift,
				flag: false,
				informationList:[],
				showField: {
					composition: false,
					dimension: false,
					seasonCode: false,
					colorCode: false,
					productionPlace: false,
					weight: false,
				}
			};
		},
		onLoad: function(options) {
			this.action = `${HTTP_REQUEST_URL}api/admin/upload/oss/image?model=content&pid=0`;
			this.headers = {
				[TOKENNAME]: this.token,
			};
			this.id = options.id;

			this.getAllCategory(); // 获取分类列表

			this.getSeasonList(); // 获取季节列表
			this.getStockAreaList(); // 获取发货地列表
			this.productGetRule(); // 获取商品属性模板
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t("navigation.cloudWarehouseProductDetails")
			});
		},
		methods: {
			handleTap(name) {
				this.$refs[name].show();
			},
			handleConfirm(e) {
				console.info(e);
				if (e.dataset.name == "stockAreaPicker") {
					this.$set(this.goodInfo, "tempName", e.item.label);
					this.$set(this.goodInfo, "tempId", e.value);
				}
				if (e.dataset.name == "selectRulePicker") {
					this.$set(this.goodInfo, "selectRuleName", e.item.label);
					this.$set(this.goodInfo, "selectRule", e.value);
					const data = [];
					let arr = [];
					e.item.ruleValue.forEach((item) => {
						data.push({
							attrName: item.value,
							attrValue: item.detail,
						});
					});
					data.map((m) => {
						m.attrValue.map((k) => {
							arr.push({
								image: "",
								price: 0,
								cost: 0,
								otPrice: 0,
								stock: 0,
								manyTabDate: k,
							});
						});
					});

					this.goodInfo.attr = data;

					this.ManyAttrValue = arr;
					console.info(this.goodInfo.attr);
				}
			},
			// 运费模板；
			getBrandList() {
				brandList({
					type: 1,
				}).then((res) => {
					this.brandList = res.data;
					this.getBrandList(); // 获取品牌列表
				});
			},
			// 获取发货地
			getStockAreaList() {
				var _this = this;
				stockAreaList().then((res) => {
					let list = [];
					res.data.map((i) => {
						list.push({
							label: i.stockAreaName,
							value: i.tempId,
						});
					});
					_this.stockArea = list;
				});
			},
			// 获取商品属性模板；
			productGetRule() {
				templateListApi(this.tableFrom).then((res) => {
					console.info(res.data.list);
					const list = res.data.list;
					let arr = [];
					list.map((i) => {
						arr.push({
							label: i.ruleName,
							value: i.id,
							ruleValue: JSON.parse(i.ruleValue),
						});
					});
					console.info(arr);
					this.ruleList = arr;
				});
			},
			dealPrice: function(val, val1) {
				return Number(val) + Number(val1);
			},
			// 分类列表
			getAllCategory: function() {
				let that = this;
				categoryApi({
					status: 1,
					type: 1,
				}).then((res) => {
					that.productList = res.data;
					if (this.id) {
						this.getGoodsDetail();
					}
				});
			},

			uploadImg(res, type, index) {
				if (type == 0) {
					//商品主图
					this.goodInfo.image = res.data.url;
				} else if (type == 1) {
					//商品轮播图
					this.goodInfo.sliderImages.push(res.data.url);
				} else if (type == 2) {
					//商品推荐图
					this.detailData.products[index].recommendImg = res.data.url;
				} else if (type == 3) {
					//商品批量规格图
					this.OneattrValue[0].image = res.data.url;
				} else if (type == 4) {
					this.ManyAttrValue[index].image = res.data.url;
				}
			},
			// 删除图片
			deletePic(index, type, index1) {
				if (type == 0) {
					//商品主图
					this.goodInfo.image = "";
				} else if (type == 1) {
					//商品轮播图
					this.goodInfo.sliderImages.splice(index, 1);
				} else if (type == 2) {
					//商品规格图
					// this.goodInfo.recommendImg = "";
					this.detailData.products[index1].recommendImg = "";
				} else if (type == 3) {
					//商品批量规格图
					this.OneattrValue[0].image == "";
				} else if (type == 4) {
					this.ManyAttrValue[index].image = "";
				}
			},

			bindChange2(e) {
				let {
					value
				} = e.detail;
				console.log(value);
				if (value[0] != this.value2[0]) {
					this.value2 = [];
					this.value2.push(value[0]);
					this.value2.push(0);
					this.value2.push(0);
				}
				if (value[1] != this.value2[1]) {
					this.value2 = [];
					this.value2.push(value[0]);
					this.value2.push(value[1]);
					this.value2.push(0);
				} else {
					if (value[0] == this.value2[0] && value[1] == this.value2[1]) {
						this.value2 = [];
						this.value2.push(value[0]);
						this.value2.push(value[1]);
						this.value2.push(value[2]);
					}
				}
				this.index1 = e.detail.value[0];
				this.index2 = e.detail.value[1];
			},
			// 修改分类
			confirmTap() {
				let {
					value1,
					value2,
					productList
				} = this.$data;
				this.goodInfo.cateIds =
					productList[value2[0]]["child"][value2[1]]["child"][value2[2]]["id"];
				this.productList.map((item, idx) => {
					if(item.child){
						item.child.map((iitem, idx1) => {
							if (iitem.child) {
								iitem.child.map((iiitem, idx2) => {
									if (iiitem.id == this.goodInfo.cateIds) {
										this.goodInfo.cateName =
											item.name + "/" + iitem.name + "/" + iiitem.name;
									}
								});
							}
						});
					}
				});
				this.showPicker = false;
			},
			// 品牌修改
			bindPickerBrand(e) {
				let {
					value
				} = e.detail;
				this.$set(this.goodInfo, "brandName", this.brandList[value].enName);
				this.$set(this.goodInfo, "brandId", this.brandList[value].id);
			},
			bindPickerSeason(e) {
				let {
					value
				} = e.detail;
				this.$set(this.goodInfo, "seasonCode", this.seasonList[value].name);
			},
			// 季节列表
			getSeasonList() {
				seasonListMer().then((res) => {
					this.seasonList = res.data;
				});
			},
			addAttr() {
				this.editState = true;
			},
			addAttrBlur(e) {
				console.info(e.detail.value);
				if (e.detail.value) {
					this.ManyAttrValue.push({
						image: "",
						price: 0,
						cost: 0,
						otPrice: 0,
						stock: 0,
						manyTabDate: e.detail.value,
					});
					this.goodInfo.attr[0].attrValue.push(e.detail.value);
				}

				this.editState = false;
			},
			// 批量添加
			batchAdd() {
				console.log(this.OneattrValue);
				for (const item of this.ManyAttrValue) {
					this.$set(item, "image", this.OneattrValue.image);
					this.$set(item, "cost", this.OneattrValue.cost);
					this.$set(item, "price", this.OneattrValue.price);
					this.$set(item, "image", this.OneattrValue.image);
					this.$set(item, "otPrice", this.OneattrValue.otPrice);
					this.$set(item, "stock", this.OneattrValue.stock);
				}
			},
			// 国际编码查询
			querySearchAsync() {
				if (this.goodInfo.keyword.length < 5) return;
				productNormKeywordApi(this.goodInfo.keyword).then((res) => {
					this.keywordList = res.data;
				});
			},
			// 匹配商品信息
			bindPickerKeyword(e) {
				let {
					value
				} = e.detail;
				this.goodInfo.keyword = this.keywordList[value].keyword;
				let id = this.goodInfo.keyword;
				if (!id) {
					return that.$util.Tips({
						title: this.$t('publicLang.successfulOperation')
					});
				}
				productNormKeywordApi(id).then((res) => {
					let info = res.data[0];
					this.goodInfo.image = info.image;
					this.fileListImg.push({
						url: this.goodInfo.image
					});
					this.goodInfo.sliderImages = JSON.parse(info.sliderImage);
					this.goodInfo.sliderImages.map((item) => {
						this.fileListsliderImage.push({
							url: item
						});
					});
					this.goodInfo.sliderImage = info.sliderImage;
					this.goodInfo.storeName = info.storeName;
					this.goodInfo.recommendImg = info.recommendImg;
					if (this.goodInfo.recommendImg) {
						this.fileListrecommendImg.push({
							url: this.goodInfo.recommendImg
						});
					}
					this.goodInfo.storeInfo = info.storeInfo;
					this.goodInfo.keyword = info.keyword;
					this.goodInfo.cateIds =
						info.cateId == null || info.cateId == "null" ?
						"" :
						Number(info.cateId);
					// this.formValidate.cateId = info.cateId
					this.goodInfo.unitName = info.unitName;
					this.goodInfo.sort = info.sort;
					this.goodInfo.isShow = info.isShow;
					this.goodInfo.isBenefit = info.isBenefit;
					this.goodInfo.isNew = info.isNew;
					this.goodInfo.isGood = info.isGood;
					this.goodInfo.isHot = info.isHot;
					this.goodInfo.isBest = info.isBest;
					this.goodInfo.tempId = info.tempId;
					this.goodInfo.brandId = info.brandId;
					this.goodInfo.brandName = info.brandName;
					// this.formValidate.attrValue = info.attrValue
					// this.formValidate.attr = info.attr || []
					this.goodInfo.selectRule = info.selectRule;
					this.goodInfo.isSub = info.isSub;
					this.goodInfo.content = " ";
					// this.formValidate.specType = info.specType || false
					// this.formValidate.id = info.id
					this.goodInfo.giveIntegral = info.giveIntegral;
					this.goodInfo.ficti = info.ficti;
					this.goodInfo.coupons = info.coupons;
					this.goodInfo.composition = info.composition;
					this.goodInfo.season = info.season;
					this.goodInfo.dimension = info.dimension;
					this.goodInfo.earliestArrivalData = info.earliestArrivalData;
					this.goodInfo.slowestArrivalData = info.slowestArrivalData;
					this.goodInfo.deliveryData = info.deliveryData;
					this.OneattrValue[0].image = info.image;
					
					this.productList.map((item, idx) => {
						if(item.child){
							item.child.map((iitem, idx1) => {
								if (iitem.child) {
									iitem.child.map((iiitem, idx2) => {
										if (iiitem.id == this.goodInfo.cateIds) {
											this.goodInfo.cateName =
												item.name + "/" + iitem.name + "/" + iiitem
												.name;
										}
									});
								}
							});
						}
					});
				});
			},
			// 商品详情
			getGoodsDetail() {
				uni.showLoading({
					title: this.$t("publicLang.loading")
				});
				var that = this;
				goodsDetailApi(this.id).then(async (res) => {
					var info = '';
					await res.data.products.map(i => {
						if (i.id == this.id) {
							info = i
						}
					})
					let attr = [];
					let attr2 = {};
					if (info.attrValue.length > 0 && info.attrValue[0].attrValue) {
						//获取规格名
						info.attrValue.map(re => {
							attr = Object.keys(JSON.parse(re.attrValue))
						})
						attr.map(rr => {
					 	attr2[rr] = []
						})
						//获取规格值
						info.attrValue.map(re => {
							let a = JSON.parse(re.attrValue)
							attr.map(rr => {
								if (!attr2[rr].includes(a[rr])) {
									attr2[rr].push(a[rr])
								}
							})
						})
						//生成attr
						let attrVal = [];
					 attr.map(rr => {
							let arr = {}
							arr.attrName = rr
							arr.attrValues = attr2[rr].join(",")
							attrVal.push(arr)
						})
						info.attr = attrVal;
					}

					//处理单规格或多规格
					if (info.attr.length == 1 && (info.attr[0].attrName == "尺寸" || info.attr[0].attrName == "规格") &&
						info.attr[0].attrValues == "默认" && info.attrValue.length == 1) {
						info.specType = false
					} else {
						info.specType = true
					}
					this.detailData = res.data;
					//处理详情图
					const detail = ["gwpp1", "gwmt1", "sp1", "sp", "mt1", "mt", "mx1", "api"];
					let detailArr = []
					detail.map((item) => {
						if (info[item]) {
							let arr = JSON.parse(info[item]);
							arr.map(re => {
								detailArr.push(re)
							})
						}
					})
					if (detailArr.length == 0) detailArr = JSON.parse(info.sliderImage)
					this.goodInfo = {
						image: info.image,
						recommendImg: info.recommendImg,
						sliderImages: JSON.parse(info.sliderImage),
						sliderImage: info.sliderImage,
						detailImages: detailArr,
						sp1: JSON.stringify(detailArr),
						storeName: info.storeName,
						storeInfo: info.storeInfo,
						seasonCode: info.seasonCode,
						productionPlace: info.productionPlace,
						weight: info.weight,
						colorCode: info.colorCode,
						keyword: info.keyword,
						cateIds: info.cateId == null || info.cateId == null ?
							"" : Number(info.cateId), // 商品分类id
						cateId: info.cateId, // 商品分类id传值
						unitName: info.unitName,
						sort: info.sort,
						isShow: info.isShow,
						isBenefit: info.isBenefit,
						isNew: info.isNew,
						isGood: info.isGood,
						isHot: info.isHot,
						isBest: info.isBest,
						tempId: info.tempId,
						brandId: info.brandId,
						brandName: info.brandName,
						// barCode: info.barCode,
						deliveryData: info.deliveryData,
						attrValue: info.attrValue,
						attr: info.attr,
						selectRule: info.selectRule,
						isSub: info.isSub,
						content: " ",
						specType: info.specType ? 1 : 0,
						id: info.id,
						giveIntegral: info.giveIntegral,
						ficti: info.ficti,
						coupons: info.coupons,
						composition: info.composition,
						dimension: info.dimension,
						deliveryData: info.deliveryData,
						earliestArrivalData: info.earliestArrivalData,
						slowestArrivalData: info.slowestArrivalData,
					};
					this.getRuleByCate(info.productInformation)
					this.informationList = []
					if (this.goodInfo.cateIds&&info.productInformation){
						console.info(info.productInformation,"info.productInformation")
						var productInformation = JSON.parse(info.productInformation)
						productInformation.map(i=>{
							this.informationList.push({productInformation:i.infoName,value:i.infoValue})
						})
					}
					this.fileListImg.push({
						url: this.goodInfo.image
					});
					this.goodInfo.detailImages.map((item) => {
						this.fileListproductDetails.push({
							url: item
						});
					});
					this.goodInfo.sliderImages.map((item) => {
						this.fileListsliderImage.push({
							url: item
						});
					});
					if (this.goodInfo.recommendImg) {
						this.fileListrecommendImg.push({
							url: this.goodInfo.recommendImg
						});
					}
					console.info(this.productList,'22222')
					this.productList.map((item, idx) => {
						if(item.child){
							item.child.map((iitem, idx1) => {
								if (iitem.child) {
									iitem.child.map((iiitem, idx2) => {
										if (iiitem.id == this.goodInfo.cateIds) {
											this.goodInfo.cateName =
												item.name + "/" + iitem.name + "/" + iiitem
												.name;
										}
									});
								}
							
							});
						}
						
					});
					this.stockArea.map((list, index) => {
						if (list.value == info.tempId) {
							info.tempName = list.label;
						}
					});
					if (info.specType) {
						this.goodInfo.attr = info.attr.map((item) => {
							return {
								attrName: item.attrName,
								attrValue: item.attrValues.split(","),
							};
						});
						info.attrValue.map((i, index) => {
							let valueArr = i.suk.split(",");
							this.goodInfo.attr.map((j, jndex) => {
								i.manyTabDate = valueArr[jndex];
							});
						});
						this.ManyAttrValue = info.attrValue;
						// this.ManyAttrValue.forEach((val) => {
						//   this.attrInfo[Object.values(val.attrValue).sort().join("/")] = val;
						// });
						this.OneattrValue[0].image = this.goodInfo.image;
					} else {
						this.OneattrValue = info.attrValue;
						this.goodInfo.attr = [];
					}
					this.detailData.products.map((item) => {
						if (item.recommendImg) {
							let fileImage = [];
							let data1 = {};
							data1.url = item.recommendImg;
							fileImage.push(data1);
							item.imageurl = fileImage;
						}
						this.stockArea.map((item1, index) => {
							if (item1.value == item.tempId) {
								item.tempName = item1.label;
							}
						});
						item.attrValue.map((iitem) => {
							if (iitem.image) {
								let filelist = [];
								let data = {};
								data.url = iitem.image;
								filelist.push(data);
								iitem.imageurl = filelist;
							}
						});
					});
					uni.hideLoading();
				});
			},
			// 清空加价方式
			resetPrice(id) {
				var that = this;
				productResetPrice({
					productId: id
				}).then((res) => {
					that.$util.Tips({
						title: that.$t('publicLang.successfulOperation')
					}, );
					this.getGoodsDetail()
				});
			},
			// 提交
			handleSubmit() {
				var that = this;
				// var data = { storeProductMers: [] };
				// this.detailData.products.map((i, index) => {
				//   let val;
				//   if (i.price == i.attrValue[0].price) {
				//     console.log("价格没改");
				//     val = {
				//       productId: i.attrValue[0].productId,
				//       recommendImg: i.recommendImg,
				//     };
				//   } else {
				//     val = {
				//       productId: i.attrValue[0].productId,
				//       price: i.attrValue[0].price==""?0:i.attrValue[0].price,
				//       recommendImg: i.recommendImg,
				//       priceType: 1,
				//     };
				//   }
				//   data.storeProductMers.push(val);
				// });
				var data = {
					storeProductMers: []
				};
				this.detailData.products.map((i, index) => {
					let val;
					val = {
						productId: i.attrValue[0].productId,
						recommendImg: i.recommendImg,
						storeProductValueMerList: [],
						priceType: 1
					};
					i.attrValue.map((j, jndex) => {
						let val1 = {
							id: j.id,
							productId: j.productId,
							price: j.price,
							sourceSkuId: j.sourceSkuId
						}
						val.storeProductValueMerList.push(val1);
					})
					console.info(1)
					data.storeProductMers.push(val);
				});
				console.log(data);
				productCloudUpdateApi(data)
					.then((res) => {
						that.$util.Tips({
							title: that.$t('goods.editedSuccessfully')
						});
						uni.navigateBack();
					})
					.catch((err) => {
						that.$util.Tips({
							title: err
						});
					});
			},
			getRuleByCate(info) {
				let _this = this
				_this.informationList = []
				getRuleByCate({
					cateId: this.goodInfo.cateIds
				}).then((res) => {
					console.info(res.data.informationList, info, 11)
					if (info) {
						let productInformation = JSON.parse(info)
						if (res.data.informationList) {
							_this.informationList = JSON.parse(JSON.stringify(res.data.informationList))
							_this.informationList.map(i => {
								i.value = ""
								productInformation.map(j => {
									if (i.productInformation == j.infoName) {
										i.value = j.infoValue
									}
								})
							})
						}
					} else {
						if (res.data.informationList) {
							_this.informationList = res.data.informationList
						}
						_this.informationList.map((i, index) => {
							i.value = ""
						})
					}
					const list = res.data.storeProductRuleList;
					let arr = [];
					list.map((i) => {
						arr.push({
							label: i.ruleName,
							value: i.id,
							ruleValue: JSON.parse(i.ruleValue),
						});
					});
					_this.ruleList = arr;
			
					const infoList = ["成分", "规格", "重量", "色号", "产地", "季节"]; //页面固有字段
					const infoField = {
						"成分": "composition",
						"规格": "dimension",
						"季节": "seasonCode",
						"色号": "colorCode",
						"产地": "productionPlace",
						"重量": "weight"
					} //页面固有字段对应显示字段
					_this.showField = {
						composition: false,
						dimension: false,
						seasonCode: false,
						colorCode: false,
						productionPlace: false,
						weight: false,
					} //固有字段初始设为隐藏
					for (var i = 0; i < _this.informationList.length; i++) {
						if (infoList.indexOf(_this.informationList[i].productInformation) != -1) { //匹配到的是否包含固有字段
							_this.showField[infoField[_this.informationList[i].productInformation]] =
							true; //显示页面字段   
							_this.informationList.splice(i, 1); //删除数组内的固有字段   
							i--; //i需要自减，否则每次删除都会讲原数组索引发生变化
						}
					}
					console.info(_this.showField,"_this.showField")
				});
			},
			// 选择视频
			// selectVideo() {
			// 	var _this = this
			// 	uni.chooseVideo({
			// 		count: 1,
			// 		sourceType: ['camera', 'album'],
			// 		success: function(res) {
			// 			console.info(res)
			// 			_this.VideoFlag = true
			// 			uni.showLoading({
			// 				title: '上传中',
			// 				mask: false,
			// 			});
			// 			if (_this.downloadTask) {
			// 				_this.downloadTask.abort();
			// 				_this.VideoUploadPercent = 0
			// 			}
			// 			_this.downloadTask = uni.uploadFile({
			// 				url: '/api/mini/file/upload',
			// 				filePath: res.tempFilePath,
			// 				name: 'file',
			// 				success: (uploadFileRes) => {
			// 					console.info(uploadFileRes)
			// 					var res = JSON.parse(uploadFileRes.data)
			// 					if (res.result === 1) {
			// 						_this.dataObj.videoUrl = res.data
			// 						_this.flag = true
			// 						_this.VideoFlag = false
			// 					}
			// 				},
			// 				complete: () => {
			// 					uni.hideLoading()
			// 				}
			// 			});
			// 			console.info(_this.downloadTask)
			// 			_this.downloadTask.onProgressUpdate((res) => {
			// 				_this.VideoUploadPercent = res.progress
			// 			})
			// 		}
			// 	});
			// },
		},
	};
</script>
<style lang="scss" scoped>
	.goods-detail {
		background: #ffffff;
		padding: 10rpx 10rpx;

		.uni-form-item {
			padding: 20rpx 30rpx;

			.title {
				padding: 10rpx 0rpx;
				margin-bottom: 10px;
				font-weight: bold;
			}

			.keyword {
				display: flex;
				background: #f2f2f2;
				justify-content: space-between;
				align-items: center;
			}

			.uni-input {
				padding: 15rpx 25rpx;
				background: #f2f2f2;
			}

			.imageBox {
				.image {
					width: 80rpx;
					height: 80rpx;
					margin: 0rpx 5rpx;
				}

				.imageBody {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #c7c7cc;
					font-size: 28rpx;
					color: #989898;
					width: 112rpx;
					height: 112rpx;
					flex-shrink: 0;
					position: relative;

					.delIcon {
						position: absolute;
						right: 0;
						top: 0;
						color: #DD524D;
					}

					.iconfont {
						font-size: 50rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}

					video {
						width: 100%;
						height: 100%;
					}
				}
			}

			.text {
				border: 1rpx solid #e8e9ed;
				width: 100%;
			}
			
			.goodsInfo1 {
				// border-top: 1rpx solid #e8e9ed;
				margin: 40rpx 0rpx;
			
				.item-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
			
					.item {
						display: flex;
						align-items: center;
						padding: 20rpx 10rpx;
						width: 326rpx;
						flex-shrink: 0;
						border-bottom: 1rpx solid #e8e9ed;
						border-left: 1rpx solid #E8E9ED;
			
						.title1 {
							width: 138rpx;
							margin: 0rpx 7rpx;
							font-weight: bold;
							overflow:hidden;
							white-space:nowrap;
						}
			
						.btn {
							padding: 20rpx 35rpx;
							border-radius: 0;
							background: black;
							color: white;
							font-size: 24rpx;
							margin-left: 30rpx;
						}
			
						input,
						.picker {
							flex: 1;
						}
					}
			
					.item:nth-child(2n+1) {
						border-left: none
					}
				}
			}

			.goodsInfo {
				border-top: 1rpx solid #e8e9ed;
				margin: 20rpx 0rpx;

				.item-list {
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #e8e9ed;

					.item {
						display: flex;
						align-items: center;
						padding: 20rpx 10rpx;
						width: 326rpx;

						.title1 {
							width: 174rpx;
							margin: 0rpx 7rpx;
							font-weight: bold;
						}

						.inputColor {
							color: gray !important;
						}

						input,
						.picker {
							flex: 1;
						}

						.skuImage {
							width: 100%;

							.image {
								width: 35rpx;
								height: 35rpx;
							}
						}
					}
				}
			}

			.time {
				background: #f2f2f2;
				display: flex;
				align-items: center;
				padding: 10rpx 5rpx;

				input {
					padding: 5rpx 15rpx;
				}
			}

			.clearPrice {
				display: flex;
				align-items: center;

				.btn {
					padding: 20rpx 35rpx;
					border-radius: 0;
					background: black;
					color: white;
					font-size: 24rpx;
					margin-left: 30rpx;
				}

				.err {
					opacity: 0.5;
				}
			}

			.alt {
				padding: 10rpx 0rpx;

				span {
					display: block;
					color: #bbbbbb;
					font-size: 22rpx;
				}
			}
		}

		.back_mask {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}

		// 新增样式start===============
		input {
			color: rgba(34, 34, 34, 1) !important;
		}

		.picker_address_box {
			left: 0;
			right: 0;
			height: 500rpx;
			background-color: #ffffff;
			position: absolute;
			bottom: 0;
			padding: 0 20rpx;

			.picker_btn {
				padding: 20rpx 0;
				font-size: 24rpx;
				color: #222222;
				display: flex;
				justify-content: space-between;

				.btn_confirm {
					background-color: rgba(34, 34, 34, 1);
					border-radius: 4rpx;
					color: #ffffff;
					padding: 10rpx 20rpx;
				}
			}

			.picker_box {
				height: 200rpx;
				position: absolute;
				width: 100%;
				bottom: 200rpx;

				.picker_view {
					height: 200rpx;
					font-size: 32rpx;
					text-align: center;
				}

				.area_type {
					width: 230rpx;
					text-align: center;
					flex: none;
				}

				.area_city {
					width: 230rpx;
					text-align: center;
					flex: none;
				}
			}
		}

		.footer {
			position: fixed;
			padding: 0rpx 20rpx;
			bottom: 0rpx;
			width: 100%;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			display: flex;
			height: 120rpx;
			background-color: #fff;
			z-index: 277;
			border-top: 1rpx solid #f0f0f0;
			font-size: 24rpx;

			.btn {
				border: 1rpx solid #1d1c1c;
				background: black;
				color: #fff;
				width: 100%;
				text-align: center;
				padding: 20rpx 0rpx;
			}
		}
	}

	.slot-btn {
		width: 112rpx;
		height: 112rpx;
		padding: 30rpx;
		border: 1rpx solid #c7c7cc;
	}

	.imageBox ::v-deep .u-delete-icon {
		width: 30rpx;
		height: 30rpx;
		top: -11rpx;
		right: -6rpx;
	}

	.selectRuleList {
		display: flex;

		.selectRuleItem {
			border: 2rpx solid #e0e0e0;
			width: 80rpx;
			height: 62rpx;
			text-align: center;
			font-size: 26rpx;
			line-height: 62rpx;
		}

		.selectRuleItem~.selectRuleItem {
			margin-left: 20rpx;
		}

		.selectRuleAddItem {
			margin-left: 20rpx;
			border: 2rpx solid #e0e0e0;
			width: 126rpx;
			height: 62rpx;
			text-align: center;
			font-size: 26rpx;
			line-height: 62rpx;
		}
	}
</style>
